<template>
  <div v-html="renderedContent" style="padding: 0px"></div>
</template>

<script>
import { marked } from "marked";
import hljs from "highlight.js";
import DOMPurify from "dompurify";

// 配置 Markdown 解析器
marked.setOptions({
  highlight: (code, lang) => {
    return hljs.highlightAuto(code).value;
  },
  breaks: true, // 转换换行符
});

export default {
  props: ["rawContent"],
  computed: {
    renderedContent() {
      const rawMarkdown = this.rawContent;
      const unsafeHtml = marked(rawMarkdown);
      return DOMPurify.sanitize(unsafeHtml); // XSS 安全过滤
    },
  },
};
</script>

<style>
@import "highlight.js/styles/github.css"; /* 代码高亮主题 */
</style>